<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* flex 布局中不区分行内元素块元素，他们都能够设置宽高 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: skyblue;
            justify-content: space-between;
        }
        div span {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <!-- 

    学习flex布局目标

        能够说出flex盒子的布局原理
        能够使用flex布局的常用属性
        能够独立完成携程移动端首页案例


    flex布局学习内容

        flex布局体验
        flex布局原理
        flex布局父项常见属性
        flex布局子项常见属性
        携程网首页案例制作


     -->

     <!-- 

        1.flex布局体验

        1.1传统布局与flex布局

        传统布局
            兼容性好
            布局繁琐
            局限性，不能再移动端很好的布局


        flex弹性布局
            操作方便，布局极为简单，移动端应用很广泛
            PC端浏览器支持情况较差
            IE11或更低版本，不支持或仅部分支持

        建议︰
            1．如果是PC端页面布局，我们还是传统布局。
            2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

      -->
      <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
      </div>
</body>
</html>